<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail setting</title>

    <style>
        pre,
        textarea {
            width: 100%;
        }

        textarea {
            resize: vertical;
        }
    </style>
</head>

<body>

    <div>
        Request group:
        <select id="sltRequestGroup"></select>
    </div>

    <div>
        name:
        <input id="inputName">
    </div>

    <div>
        url: <em>multi urls</em>
        <textarea id="areaUrls"></textarea>
    </div>

    <div id="loadResult"></div>
    <div>
        <!-- <button id="btnTest">test</button> -->
        <button id="btnSave">save</button>
        <button id="btnLoad">load</button>
    </div>
    <script>
        let globalConfig = "%Config%";
    </script>
    <script>
        let $sltRequestGroup = document.getElementById('sltRequestGroup');
        globalConfig.requestGroups.forEach(groupName => {
            var optItem = document.createElement("OPTION");
            $sltRequestGroup.options.add(optItem);
            optItem.text = groupName;
            optItem.value = groupName;
            // if (oOption.value == mat) {
            //     oOption.selected = true;
            // }
        });

        if (globalConfig.isEditing) {
            document.getElementById('inputName').setAttribute("readonly", "readonly");
            let editData = globalConfig.editData;
            $sltRequestGroup.value = editData.requestGroupName;

            document.getElementById('inputName').value = editData.name;
            document.getElementById('sltRequestGroup').value = editData.requestGroupName;
            document.getElementById("areaUrls").value = editData.urls;
        }

        const vscode = acquireVsCodeApi();

        document.getElementById('btnSave').addEventListener('click', () => {
            vscode.postMessage({
                command: 'saveConfig',
                data: {
                    name: document.getElementById('inputName').value,
                    requestGroupName: document.getElementById('sltRequestGroup').value,
                    urls: document.getElementById("areaUrls").value
                }
            });
        });

        document.getElementById('btnLoad').addEventListener('click', () => {
            vscode.postMessage({
                command: 'loadData',
                data: {
                    name: document.getElementById('inputName').value,
                    requestGroupName: document.getElementById('sltRequestGroup').value,
                    urls: document.getElementById("areaUrls").value
                }
            });
        });


        window.addEventListener('message', event => {
            const message = event.data; // The JSON data our extension sent

            switch (message.command) {
                case 'loadingResult':
                    let data = message.data;
                    let text = `${data.index}/${data.total}`;
                    document.getElementById('loadResult').innerText = text;
                    break;
            }
        });

    </script>
</body>

</html>